<template>
  <div>
    <div id="main" style="height: 260px; border: 1px solid #666"></div>
    <el-divider content-position="left">电影院列表</el-divider>
    <el-table :data="cinemas">
      <el-table-column
        label="影院名称"
        width="250px"
        prop="cinema_name"
      ></el-table-column>
      <el-table-column label="影院地址" prop="address"></el-table-column>
      <el-table-column label="影院位置" width="200px">
        <template slot-scope="scope">
          {{ scope.row.province }}
          {{ scope.row.city }}
          {{ scope.row.district }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="success"
            icon="el-icon-location"
            circle
            @click="moveTo(scope.row)"
          ></el-button>
          <el-button
            size="small"
            type="info"
            icon="el-icon-notebook-2"
            circle
            @click="$router.push('/home/cinema-room-list/' + scope.row.id)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import httpApi from "@/http";
export default {
  data() {
    return {
      cinemas: [], //存储电影院列表
      map: null, //地图对象
      AMap: null,
    };
  },
  methods: {
    // 删除电影院
    del(cinemaid) {
      this.$confirm("此操作将永久删除该电影院, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = cinemaid;
          httpApi.cinemaApi.delete({ id }).then((res) => {
            console.log(res);
            this.initData();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //移动到地图的某一个位置
    moveTo(cinema) {
      console.log(cinema);
      let lng = cinema.longitude; //当前影院经度
      let lat = cinema.latitude; //当前影院纬度
      this.map.setZoomAndCenter(15, [lng, lat], false, 700);
    },
    initMap() {
      AMapLoader.load({
        key: "450574bf3546cb0309e12f44394dd880", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.AMap = AMap;
        this.map = new AMap.Map("main", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 11, //初始化地图级别
          center: [116.397202, 39.905075], //初始化地图中心点位置
        });
        // 为地图对象绑定点击事件
        this.map.on("click", (e) => {
          let lng = e.lnglat.getLng();
          let lat = e.lnglat.getLat();
          console.log(`经纬度：[${lng}, ${lat}]`);
          // 调用高德地图的web服务接口，查询当前经纬度的坐标
          let geocoder = new AMap.Geocoder();
          geocoder.getAddress([lng, lat], (status, result) => {
            console.log(status, result);
          });
        });
        // 加载影院列表数据
        this.initData();
      });
    },
    // 初始化数据
    initData() {
      httpApi.cinemaApi.queryAll().then((res) => {
        this.cinemas = res.data.data;
        // 为每一家电影院添加点标记
        this.cinemas.forEach((item) => {
          let lng = item.longitude;
          let lat = item.latitude;
          // 向地图添加点标记
          let maker = new this.AMap.Marker({
            position: new this.AMap.LngLat(lng, lat),
            title: item.cinema_name,
          });
          this.map.add(maker);
        });
      });
    },
  },
  mounted() {
    // 加载地图
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
</style>